/**
 * 列表集合的Sinks
 */

import { VNode } from '@cycle/dom';
import { TodoListSources, TodoListSinks, TodoListReducer, TodoListCollectionSources } from '../../types';
import Item from '../Item'

export default function List(sources : TodoListCollectionSources) {
  const items = sources.onion.toCollection(Item)
    .uniqueBy(s => String(s.key))
    .isolateEach(key => key)
    .build(sources);

  const vdom$ = items
    .pickCombine('DOM')
    .map((vnodes : Array<VNode> ) => <ul className='todo-list'>{vnodes}</ul>);

  const reducer$ = items
    .pickMerge('onion');

  return {
    DOM: vdom$,
    onion: reducer$,
  };
}


